<template>
    <div class="dashborad__page">
        <el-row :gutter="16">
            <el-col :span="16">
                <nowLoginAdmin class="dashborad-card__item" />
                <messageBoard class="dashborad-card__item" />
                <adminTeam class="dashborad-card__item" />
            </el-col>
            <el-col :span="8">
                <todoModule class="dashborad-card__item" />
                <dynamicModule class="dashborad-card__item" />
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
import messageBoard from "./components/messageBoard.vue";
import nowLoginAdmin from "./components/nowLoginAdmin.vue";
import adminTeam from "./components/adminTeam.vue";
import todoModule from "./components/todo.vue";
import dynamicModule from "./components/dynamicModule.vue";

export default {
    name: "Dashboard",
    components: {
        messageBoard,
        nowLoginAdmin,
        adminTeam,
        todoModule,
        dynamicModule,
    },
    data() {
        return {
            waitExampleArchiveCount: 0,
        };
    },
    computed: {
        ...mapGetters(["nickname"]),
    },
};
</script>

<style lang="scss">
.dashborad__page {
    padding: 16px;

    .dashborad-card__item {
        margin-bottom: 16px;
        font-size: 14px;

        .el-card__header {
            color: #666;
            font-weight: bold;
        }
    }

}
</style>
